﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/App.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="Ornament.Messages" %>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="<%=Url.Content("~/Scripts/Lib/fg-menu/fg.menu.css")%>" rel="stylesheet" type="text/css" />

    <script src="<%=Url.Content("~/Scripts/Lib/fg-menu/fg.menu.js")%>" type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/lib/treeView/jquery.treeview.js")%>" type="text/javascript"></script>

    <script src="<%=Url.Content("~/Scripts/Lib/jquery.bindTools.js")%>" type="text/javascript"></script>    

    <link href="<%=Url.Content("~/Scripts/lib/treeView/jquery.treeview.css")%>" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .lPanel
        {
            float: left;
            width: 400px;
            height: 450px;
        }
        .rPanel
        {
            float: left;
        }
        #infoTypeTree
        {
            overflow: auto;
            height: 423px;
        }
        .selectedNav
        {
            background-color: Gray;
            color: White;
        }
        .ui-icon
        {
            display: inline-block;
        }
        #ParentName
        {
            width: 150px;
        }
        .fg-button
        {
            clear: left;
            margin: 0 4px 40px 0px;
            padding: .2em 1em;
            text-decoration: none !important;
            cursor: pointer;
            position: relative;
            text-align: center;
            zoom: 1;
        }
        .fg-button .ui-icon
        {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            left: 50%;
            margin-left: -8px;
        }
        button.fg-button
        {
            width: auto;
            overflow: visible;
        }
        /* removes extra button width in IE */
        
        .fg-button-icon-left
        {
            padding-left: 2.1em;
        }
        .fg-button-icon-right
        {
            padding-right: 2.1em;
        }
        .fg-button-icon-left .ui-icon
        {
            right: auto;
            left: .2em;
            margin-left: 0;
        }
        .fg-button-icon-right .ui-icon
        {
            left: auto;
            right: .2em;
            margin-left: 0;
        }
        .fg-button-icon-solo
        {
            display: block;
            width: 8px;
            text-indent: -9999px;
        }
        /* solo icon buttons must have block properties for the text-indent to work */
        
        .fg-button.ui-state-loading .ui-icon
        {
            background: url(spinner_bar.gif) no-repeat 0 0;
        }
    </style>
    <!-- style exceptions for IE 6 -->
    <!--[if IE]>
	<style type="text/css">
		.fg-menu-ipod .fg-menu li { width: 95%; }
		.fg-menu-ipod .ui-widget-content { border:0; }
	</style>
	<![endif]-->
    <script type="text/javascript">
        function clear() {
            $("form")[0].reset();
            $("[name=ParentName]").text("无父节点");
            $("[name=ParentId]").val("");
            $("[name=Id").val("");
        }
        $(document).ready(function () {

            $('#ParentName').menu({
                content: $('#infoTypeSelectorPanel').html(),
                backLink: false,
                crumbDefaultText: "选择所属消息类型",
                flyOut: true,
                chooseItem: function (item) {
                    this.kill();
                    $("#ParentId").val(GetId(item));
                    $("#ParentName").children("span:first").text($(item).text());
                }
            });

            $("#createInfo").button().click(function () {
                clear();
                EnableEditPanel(true);
                $("#save").hide();
                $("#add").show();

            });

            $(".rPanel").bindTool({
                way: [
                { member: "Name" },
                { member: "Comment" },
                { member: "ParentId" },
                { member: "ParentName" },
                { member: "Id" },
                ],
                onBound: function () {
                    var isAdd = $("#Id").val() == "";
                    $("#add").toggle(isAdd);
                    $("#save").toggle(!isAdd);
                    EnableEditPanel(true);

                }
            });
            var selectedTreeNode;
            //left panel init.
            $("a", $("#infoTypeTree").treeview()).click(function () {

                $(selectedTreeNode).removeClass("ui-state-active");
                selectedTreeNode = $(this);
                var id = GetId($(this).addClass("ui-state-active"));

                if (id != "root") {
                    $.get('<%=this.Url.Action("Get") %>', { Id: id }, function (result) {
                        $(".rPanel").bindTool('bind', result);
                    });
                }
                return false;
            });

            $("#add").button().click(function () {
                var obj = $(".rPanel").bindTool('collect');
                $.post('<%=Url.Action("Save")%>', { type: $.toJSON(obj) }, function (data) {
                    oAlert(data.Message);
                    var id = data.Data.Id;
                    var parentId = $("[name = ParentId]").val();
                    if (parentId.length == 0) {
                        parentId = "root";
                    }
                    var branch = $("<li><a href=#" + id + ">" + obj.Name + "</a></li>").appendTo($("#infoTypeTree a[href=#" + parentId + "]"));
                    $("#infoTypeTree").treeview({
                        add: branch
                    });

                    $(".rPanel form")[0].reset()
                    EnableEditPanel(false);
                });

            });

            $("#save").button().click(function () {
                var obj = $(".rPanel").bindTool('collect');

                $.post('<%=Url.Action("Save")%>', { type: $.toJSON(obj) }, function (data) {
                    var info = $("#infoTypeTree a[href=#" + obj.Id + "]");
                    info.text(obj.Name);
                    EnableEditPanel(false);
                });
            });
        });

        function GetId(target) {
            var id = $(target).attr("href");
            var position = id.indexOf("#") + 1;
            return id.substr(position);
        }
        function EnableEditPanel(enable) {
            var a = $("button,input,textArea", $(".rPanel"))
            enable ? a.removeAttr("disabled") : a.attr("disabled", "disabled");
            a.toggleClass("ui-state-disabled", !enable);
        }
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    信息设定
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="buttonContainer">
        <button id="createInfo">
            添加</button>
    </div>
    <div class="lPanel panel ui-widget-content ui-widget ui-corner-all">
        <div class="ui-widget-header ui-corner-all">
            信息类型树
        </div>
        <ul id="infoTypeTree">
            <%
                Build((IList<InfoType>)ViewData["types"], true);
            %>
        </ul>
    </div>
    <div class="rPanel ui-corner-all">
        <%
            Html.BeginForm();%>
        <fieldset class="cssform">
            <legend>添加信息类型</legend>
            <p>
                <label>
                    名字:</label>
                <input type="text" name="Name" disabled="disabled" />
                <input type="hidden" name="Id" />
            </p>
            <p>
                <label>
                    父节点:</label>
                <a id="ParentName" href="#infoTypeSelectorPanel" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all"
                    style="color: #fff"><span name="ParentName">无父节点</span><span class="ui-icon ui-icon-triangle-1-s"></span>
                </a>
                <input type="hidden" name="ParentId" />
            </p>
            <p>
                <label>
                    备注:</label>
                <textarea name="Comment" disabled="disabled"></textarea>
            </p>
            <div class="toolbar">
                <button id="save" style="display: none" disabled="disabled" type="button">
                    保存</button>
                <button id="add" disabled="disabled" type="button">
                    添加</button>
            </div>
        </fieldset>
        <%
            Html.EndForm(); %>
    </div>
    <div style="clear: both">
    </div>
    <div id="infoTypeSelectorPanel" class="ui-helper-hidden-accessible">
        <ul>
            <%
                Build((IList<InfoType>)ViewData["types"], true);
            %>
        </ul>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageTitle" runat="server">
    信息类型设定
</asp:Content>
<script type="text/C#" runat="server">
    private void Build(IList<InfoType> childNodes, bool first)
    {

        foreach (var node in childNodes)
        {
            if (node.Count == 0)
            {
                Response.Write(String.Format(("<li><a href='#{0}'>{1}</a></li>"), node.Id.ToString(), node.Name));
            }
            else
            {
                Response.Write(String.Format(("<li><a href='#{0}'>{1}</a>"), node.Id.ToString(), node.Name));
                Response.Write("<ul>");
                this.Build(node.GetChilds(), false);
                Response.Write("</ul>");
                Response.Write("</li>");
            }


        }
    }
</script>
